<template>
  <!-- 静态参数 -->
  <div class="onlyBox">
    <el-button class="addBtn" type="success" @click="addMangDialog = true">添加静态参数</el-button>

    <el-table :data="list" border style="width: 500px">
      <el-table-column type="index" label="#" width="50" />
      <el-table-column prop="attr_name" label="参数名称" width="160" />
      <el-table-column prop="attr_vals" label="参数描述" width="100"/>
      <el-table-column label="操作" width="200">
        <template #default = '{ row }'>
          <el-button type="warning">编辑</el-button>
          <el-button type="danger" @click="delOnly(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加静态参数 -->
    <el-dialog v-model="addMangDialog" title="添加静态参数" width="500px">
      <el-form :model="form">
        <el-form-item label="参数名称">
          <el-input v-model="form.attr_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="参数描述">
          <el-input v-model="form.attr_vals" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addMangDialog = false">关闭</el-button>
          <el-button type="primary" @click="addOnlyParams">确定添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
  name: 'params-many',
  props: ['list', 'id'],
  data () {
    return {
      addMangDialog: false,
      form: {
        attr_sel: 'only'
      }
    }
  },
  methods: {
    // 确定添加静态参数
    async addOnlyParams () {
      const res = await this.$http.post(`categories/${this.id}/attributes`, this.form)
      if (res.meta.status !== 201) return

      this.addMangDialog = false
      this.$emit('addFinsh')
      ElMessage({
        showClose: true,
        message: '添加成功',
        type: 'success'
      })
    },
    async delOnly (info) {
      const res = await this.$http.delete(`categories/${info.cat_id}/attributes/${info.attr_id}`)
      if (res.meta.status !== 200) return
      this.$emit('addFinsh')
      ElMessage({
        showClose: true,
        message: '删除成功',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.addBtn{
  margin-bottom: 10px;
}
</style>
